import bgImage from "./logo.svg";

const NineGrid = () => {
  return (
    <div style={{ 
      width: "200px",
      height: "200px",
      borderImageSource: `url(${bgImage})`,
      borderImageSlice: "0% 32% 28% 32% fill",

      borderImageRepeat: "stretch"
    }}>
      <div style={{ 
        display: "flex", 
        flexWrap: "wrap",
        height: "100%"
      }}>
        {[...Array(9)].map((_, index) => (
          <div 
            key={index}
            style={{ 
              width: "33.33%", 
              height: "33.33%",
              display: "flex",
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            {index === 4 ? (
              <button>抽奖</button>
            ) : (
              <span>Item {index}</span>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

export default NineGrid;